@import '../def.scss';
@font-face {
	
	font-family: "ShangShouYaLiTi";
	src: url('~@/style/fonts/ShangShouYaLiTi.ttf');
	font-weight: normal;
	font-style: normal;
}

page,.content-body{
	
	// margin: 0;
	// position: absolute;
 //    top: 0;
 //    left: 0;
 //    right: 0;
 //    bottom: 0;
 //    background: #F3F3F3;
 //    z-index: -1;
    width: 740rpx;
	margin: 0 auto;
	.uni-padding-wrap{
			width: 100%;
			height: 100%;
			background-size: 100% auto ;
			padding: 0;
		}
		.swiper{
			width: 100%;
			height: 100%;
			background: transparent;
			// background: linear-gradient(180deg, $uni-color-shen 100%, $uni-color-qian 90%);
			z-index: 999;
			/deep/ .uni-swiper-dot-active{
				background: #5C9FFE !important;
			}
			 .swiper-wrap{
				width: 100%;
				height: 100%;
				// padding:0 50rpx;
				box-sizing: border-box;
			}
			/deep/ .uni-swiper-dots-horizontal{
				bottom: 220rpx;
			}
		}
		
		.swiper-item {
			width: 100%;
			height: 100%;
			text-align: center;
			position: relative;
			display: flex;
			/* justify-content: center; */
			align-items:flex-end;
			flex-direction:column-reverse
		}
	
		.uniapp-img{
			height: 20%;
			background: #ff9933;
			display: flex;
			justify-content: center;
			align-items:center;
			overflow: hidden;
		}
		.uniapp-img .guide-img{
			width: 40%;
		}
		
		.jump-over,.experience{
			position: absolute;
			height: 60upx;
			line-height: 60upx;
			padding: 0 40upx;
			border-radius: 30upx;
			font-size: 32upx;
			color: #ff9933;
			border: 1px solid #ff9933;
			z-index: 999;
		}
		.jump-over{
			left: 45upx;
			top: 44upx;
			margin-top: 20rpx;
		}
		.experience{
			right: 17%;
		    margin-right: -52px;
		    /* bottom: 127px; */
		    top: 25px;
		}
		.experience2{
			width: 650rpx;
			height: 70rpx;
			box-sizing: border-box;
			background: #5C9FFE;
			border-radius: 26px;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			justify-content: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 120rpx;
			text-align: center;
			line-height: 70rpx;
		}
	
		.guide-text{	
			line-height: 50upx;
			font-size: 40upx;
			color: #ff9933;
			position: relative;
			// font-family: ShangShouYaLiTi;
			font-weight: 600;
			z-index: 9999;
			width: 100%;
			text-align: left;
			margin-top: 90rpx;
			letter-spacing: 4rpx;
			padding: 0 40rpx;box-sizing: border-box;
			.guide-click{
				position: absolute;
				right: -60rpx;
				top: 0rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}
		.guide-compute{
			width: 100%;
			height: 700rpx;
			margin-top: 30rpx;
			position: relative;
			
			image{
				width: 100%;
				height: 100%;
			}
			span{
				font-size: 10rpx;
				position: absolute;
			}
			.foot-desc{
				line-height: 50upx;
				font-size: 38upx;
				font-weight: 600;
				color: #ff9933;
				letter-spacing: 8rpx;
				margin-top: 30rpx;
				text-align: left;
				padding: 0 40rpx;
				box-sizing: border-box;
				// font-family: ShangShouYaLiTi;
			}
		}
		.guide-other{
			width: 100%;
			height: 100%;
			position: relative;
			.icon1{
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				right: 80rpx;
				top: -60rpx;
			}
			.icon2{
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				right: 280rpx;
				top: 30rpx;
			}
			.icon3{
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				right: 180rpx;
				top: 130rpx;
			}
			.icon4{
				width: 210rpx;
				height: 210rpx;
				position: absolute;
				right: 360rpx;
				top: 140rpx;
			}
			.icon5{
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				right: 180rpx;
				top: 290rpx;
			}
			.icon6{
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				right: 270rpx;
				top: 400rpx;	
			}
			.code-wrap{
				position: absolute;
				left: 26rpx;
				top:500rpx;
				display: flex;
				flex-direction: column;
				font-family: ShangShouYaLiTi;
				.code{
					width: 160rpx;
					height: 160rpx;
					
					padding-bottom: 10rpx;
				}
				span{
					color: #ff9933;
					font-size: 40rpx;
					position: absolute;
					bottom: -40rpx;
					right: -170px;
				}
			}
			.code-wrap2{
				position: relative;
				display: flex;
				flex-direction: column;
				font-family: ShangShouYaLiTi;
				.code{
					width: 160rpx;
					height: 160rpx;
					
					padding-bottom: 10rpx;
				}
				span{
					color: #ff9933;
					font-size: 40rpx;
					position: absolute;
					bottom: 20rpx;
					left: 220rpx;
				}
			}
			
		}
}
.clearFix:after{
			/* 转为块元素 */
			display: block;
			/* 文字内容为空字符串 */
			content:"";
			/* 清楚兄弟元素浮动后对其造成的影响 */
			clear:both;
		}
.bg{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right:0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: url('../../static/guide/bg.jpg')no-repeat center;
	background-size: 100% 100%;
}
.guide-tab{
	width: 690rpx;
	margin: 40rpx auto 45rpx;
	box-sizing: border-box;
	padding: 30rpx 24rpx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30rpx;
	.tab-item{
		display: inline-block;
		padding: 8rpx 20rpx;
		font-size: 32rpx;
		margin-bottom: 30rpx;
		margin-right: 30rpx;
		border-radius: 8rpx;
		text-align: center;
		color: #000;
		// font-weight: bold;
		// text-shadow:2rpx 2rpx #fff;
	}
}
.footer{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30rpx;
	a{
		text-decoration:none;
		color: #FFF;
		font-size: 24rpx;
		color: #fff;
		text-shadow:2rpx 2rpx #000;
		text-align: center;
	}
	.record{
		display: flex;
		justify-content: center;
	}
}